<script >
export default {
    name:"GoodsData",

    data(){
        return {
            user: JSON.parse(sessionStorage.getItem("user")),

            tableData:[],
            pageSize:12,
            pageNum:1,
            total:0,

            AddToCartVisible:false,
            currentItem:null,
            unorder:{
                id:null,
                uid:null,
                gid:null,
                time:null,
                num:null,
            },
        }
    },
    methods:{

        loadPost() {

                this.$axios.post(this.$httpUrl + '/goods/querylike', {
                    "pageSize": this.pageSize,
                    "pageNum": this.pageNum,
                    "param": {
                        "id":'',
                        "name":'',
                        "price":'',
                        "picturekey":'',
                    }
                }).then(res => res.data).then(res => {
                    console.log(res)
                    this.total = res.total
                    this.tableData = res.data
                })
        },

        addToCart(item) {
            this.currentItem = item;    // 设置当前物品信息
            this.unorder.gid = item.id;
            this.unorder.num = 1;           // 默认数量为 1
            this.AddToCartVisible = true;   // 打开对话框

            this.$axios.post(this.$httpUrl + '/browse/saveORmodify', {
                "id": this.unorder.id,
                "uid": this.unorder.uid,
                "gid": this.unorder.gid,
                "time": this.unorder.time,
            }).then(res=>res.data).then(res => {
                if (res.code === 200) {
                    this.$notify({
                        title: '成功',
                        message: '添加浏览记录成功',
                        type: 'success'
                    });
                    this.loadPost();
                }
                else
                    this.$notify.error({
                        title: '错误',
                        message: '添加浏览记录失败'
                    });
            })

        },
        confirmAddToCart(){
            this.$axios.post(this.$httpUrl + '/unorder/saveORmodify', {
                "id": this.unorder.id,
                "uid": this.unorder.uid,
                "gid": this.unorder.gid,
                "time": this.unorder.time,
                "num": this.unorder.num,
            }).then(res=>res.data).then(res => {
                if (res.code === 200) {
                    this.$notify({
                        title: '成功',
                        message: '添加购物车成功',
                        type: 'success'
                    });
                    this.loadPost();
                }
                else
                    this.$notify.error({
                        title: '错误',
                        message: '添加购物车失败'
                    });
            })
            this.currentItem = null;
            this.unorder.gid = null;
            this.unorder.num = 1;
            this.AddToCartVisible = false;
        }
    },

    beforeMount() {
        this.loadPost();
        this.unorder.uid = this.user.id;
    }
}
</script>

<template>
    <div>
        <div style="text-align: center; margin: 10px;padding:40px; height: 22vh">
            <h2>今日好物</h2>
        </div>
        <el-carousel :interval="8000" type="card" min-height="78vh">
            <el-carousel-item v-for="(item, index) in tableData" :key="index">
                <el-card :body-style="{ padding: '0px' }" style="height: 100%; width: 100%; margin: 0 auto;" shadow="hover">
                    <div class="image-container">
                    <img :src=item.picturekey class="image">
                    </div>
                    <div style="padding: 8px;">
                        <span>{{ item.name }}</span>
                        <p>价格: <span>{{ Number(item.price).toFixed(4) }}元</span></p>
                    </div>

                    <div class="bottom">
                        <el-button class="button" size="small" type="text" @click="addToCart(item)">加入购物车</el-button>
                    </div>
                </el-card>
            </el-carousel-item>
        </el-carousel>
        <!-- Dialog 对话框 -->
        <el-dialog
            title="加入购物车"
            :visible.sync="AddToCartVisible"
            width="30%"
            :before-close="(done)=>{
                    this.currentItem = null;
                    this.unorder.gid = null;
                    this.unorder.num = 1;
                    done()
                }">
            <div v-if="currentItem">

                <!-- 商品信息 -->
                <h2>{{ currentItem.name }}</h2>
                <p>价格: {{ Number(currentItem.price).toFixed(4) }}</p>

                <!-- 选择购买数量 -->
                <el-row type="right">
                    购买数量:
                    <el-col >
                        <el-input-number
                            v-model="unorder.num"
                            :min="1"
                            :max="100"/>
                    </el-col>
                </el-row>
            </div>
            <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="confirmAddToCart">确定</el-button>
                </span>
        </el-dialog>
    </div>
</template>

<style scoped>
.el-carousel__item {
    display: flex;
    justify-content: center;
    align-items: center;
}

.el-card {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.el-carousel__item img {
    width: 100%;
    height: auto;
}

.el-carousel__item .card-body {
    padding: 10px;
    text-align: center;
}

.el-carousel__item .bottom {
    text-align: right;
    padding: 8px;
}

.image-container {
    width: 400px;
    height: 200px;
    overflow: hidden;
}

.cropped-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
</style>
